<template>
  <el-card class="statistics-order">
    <div slot="header" class="clearfix">
      <card-header title="订单销售额" @change="changeOrderTime" />
    </div>
    <ve-histogram
      :colors="colors"
      :data="chartData"
      :data-empty="dataEmpty"
      :extend="extendsConfig"
      :legend-visible="false"
      :loading="loading"
      :settings="chartSettings"
    />
  </el-card>
</template>

<script>
import VeHistogram from 'v-charts/lib/histogram.common';
import CardHeader from '../card_header.vue';
import 'v-charts/lib/style.css';

export default {
  components: {
    VeHistogram,
    CardHeader
  },
  data() {
    const moneySymbol = this.site.money_symbol;
    return {
      loading: true,
      time: 'today',
      chartSettings: {
        labelMap: {
          course_type: '订单类型',
          order_price: '营业额'
        },
        yAxisName: ['营业额/' + this.site.money_title]
      },
      dataEmpty: true,
      chartData: {},
      colors: ['#FF7D41'],
      extendsConfig: {
        series(v) {
          if (v) {
            v.forEach(i => {
              i.barWidth = '60%';
            });
            return v;
          }
        },
        tooltip(v) {
          if (v) {
            v.formatter = function (params) {
              var str = '<div>' + params[0].name.split('[')[0] + '</div>';
              for (var i = 0; i < params.length; i++) {
                str += params[i].marker + ' ' + params[i].seriesName + '：' + moneySymbol + params[i].data + '<br />';
              }

              return str;
            };
          }
          return v;
        }
      }
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    changeOrderTime: function (time) {
      this.time = time;
      this.loadData();
    },
    loadData: function () {
      this.$http.get(
          '/admin/data/order/price',
          {
            time: this.time
          },
          response => {
            const data = response.data;
            if (data.rows.length == 0) {
              this.dataEmpty = true;
            } else {
              this.dataEmpty = false;
            }
            this.chartData = response.data;
            this.loading = false;
          },
          _ => {
            this.loading = false;
          },
          false
      );
    }
  }
};
</script>

<style scoped>
.statistics-order {
  height: 460px;
}
</style>
